<template>
<el-popover
  placement="bottom-start"
  width="400"
  trigger="click">
  <el-input v-model="queryString" style="position: relative;" clearable placeholder="请输入客户名称" @clear="querySearch" @input.native="querySearch">
    <i slot="suffix" class="el-icon-search el-input__icon" />
  </el-input>
<el-table :data="gridData" @row-click="handleSelect">
  <el-table-column  property="custName" label="姓名"></el-table-column>
  <el-table-column  property="number" label="身份证"></el-table-column>
</el-table>

  <el-input slot="reference"  placeholder="点击选择用户" :value ="getUserDisplay()" readonly>
    <i slot="prefix" class="el-icon-search el-input__icon" />
  </el-input>

</el-popover>
</template>
<script>
import {listUser} from "@/api/fm/cell";

export default {
  data() {
    return {queryString:"",
      userId: null,
      userName:null,
      userNumber:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        name: null
      },
      gridData: []
    };
  },
  props: {},
  methods: {
    querySearch()
    {
      if (this.queryString)
      {
        this.queryParams.name=this.queryString;
        listUser(this.queryParams).then((response) => {
          this.gridData = response.rows;

        }).catch((err) => {
          console.log(err)
        });
      }
    },
    handleSelect(row, event, column)
    {
       this.userId = row.id;
       this.userName = row.custName;
       this.userNumber=row.number;
       this.$emit("input", this.userId);
      document.body.click()
    },
    getUserDisplay()
    {
      if(this.userName)
      {
        return this.userName + " (身份证：" + this.userNumber + ")";
      }
      return "";
    },
    reset(){
      this.userId = null;
      this.userName=null;
      this.userNumber=null;
    }
  }
};
</script>
